import React, { useState } from "react";
import { Tabs } from "antd-mobile";
import { Form, Button, DatePicker } from "antd-mobile";
import { CloseCircleFill } from "antd-mobile-icons";
import styles from "./index.module.css";
import { useNavigate } from "react-router-dom";

import dayjs from "dayjs";
const TrainCity = () => {
  const [form] = Form.useForm();
  const formRef = React.createRef();
  const [leftCity]=useState(localStorage.getItem('start')||'北京');
  const [rightCity]=useState(localStorage.getItem('end')||'三亚');
  const navigate = useNavigate();
  const onSubmit =async () => {
    const values = form.getFieldsValue();
    navigate('/search',{
      state:{
        start:leftCity,
        end:rightCity,
        time:dayjs(values.startTime).format('YYYY-MM-DD')
      }
    })

  };
  const handleCity=(type)=>{
    navigate(`/city?type=${type}`)
  }
  return (
    <div className={styles.home}>
      <div className={styles.cityBox}>
        <span onClick={()=>handleCity('start')}>{leftCity}</span>
        <span>-------</span>
        <span onClick={()=>handleCity('end')}>{rightCity}</span>
      </div>
      <Form
        form={form}
        ref={formRef}
        footer={
          <Button block color="primary" onClick={onSubmit} size="large">
            火车票查询
          </Button>
        }
      >
        <DatePickerInputItem />
      </Form>
    </div>
  );
};

const DatePickerInputItem = () => {
  const [pickerVisible, setPickerVisible] = useState(false);

  return (
    <Form.Item
      noStyle
      shouldUpdate={(prevValues, curValues) =>
        prevValues.startTime !== curValues.startTime
      }
    >
      {({ getFieldValue, setFieldsValue }) => (
        <Form.Item
          name="startTime"
          label=""
          trigger="onConfirm"
          arrow={
            getFieldValue("startTime") ? (
              <CloseCircleFill
                style={{
                  color: "var(--adm-color-light)",
                  fontSize: 14,
                }}
                onClick={(e) => {
                  e.stopPropagation();
                  setFieldsValue({ startTime: null });
                }}
              />
            ) : (
              true
            )
          }
          onClick={() => {
            setPickerVisible(true);
          }}
        >
          <DatePicker
            visible={pickerVisible}
            onClose={() => {
              setPickerVisible(false);
            }}
          >
            {(value) =>
              value
                ? dayjs(value).format("YYYY-MM-DD")
                : dayjs(new Date()).format("YYYY-MM-DD")
            }
          </DatePicker>
        </Form.Item>
      )}
    </Form.Item>
  );
};

const Home = () => {
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="火车" key="1">
          <TrainCity />
        </Tabs.Tab>
        <Tabs.Tab title="机票" key="2">
          机票
        </Tabs.Tab>
        <Tabs.Tab title="酒店" key="3">
          酒店
        </Tabs.Tab>
        <Tabs.Tab title="汽车票" key="4">
          汽车票
        </Tabs.Tab>
        <Tabs.Tab title="打车出租" key="5">
          打车出租
        </Tabs.Tab>
        <Tabs.Tab title="门票" key="6">
          门票
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default Home;
